<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <style>
        div.ui-datepicker{
            font-size: small !important;
        } 
    </style>

    <ui:composition template="/template.xhtml">        
        <ui:define name="title">
            <h:outputText value="#{chofer.NuevoChofer}"></h:outputText>
        </ui:define>
        <ui:define name="body">            
            <p:growl id="growl" showDetail="true" />
            <h:form id="frmCrearChofer" enctype="multipart/form-data">                
                <p:panel header="Nuevo Chofer" style=" background: white; font-size: small">                    
                    <table width="100%" style="font-size: small">
                        <tr>
                            <th align="right" scope="row">
                                <p:outputLabel for="txtRuc" value="#{chofer.RUC}"/>
                            </th>
                            <td width="200px" align="left">
                                <p:inputText id="txtRuc" value="#{choferController.selected.ruc}" title="#{chofer.RUC}" required="true" requiredMessage="#{chofer.CampoRUC}" size="35"/>
                            </td>
                            <td align="left"><p:message for="txtRuc" /></td>
                            <td rowspan="10" align="center">
                                <div align="right">
                                    <p:graphicImage width="250" height="350" url="../img/ico/chofer/nuevo.jpg"/>                                                                    
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th  align="right" scope="row">
                                <p:outputLabel for="txtNombres" value="#{chofer.Nombres}"/>
                            </th>
                            <td  align="left">
                                <p:inputText id="txtNombres" value="#{choferController.selected.nombres}" title="#{chofer.Nombres}" required="true" requiredMessage="#{chofer.CampoApellido}" size="35"/>
                            </td>
                            <td align="left">
                                <p:message for="txtNombres" />
                            </td>
                        </tr>
                        <tr>
                            <th align="right" scope="row">
                                <p:outputLabel for="txtApellidos" value="#{chofer.Apellidos}"/>
                            </th>
                            <td align="left">
                                <p:inputText id="txtApellidos" value="#{choferController.selected.apellidos}" title="#{chofer.Apellidos}" required="true" requiredMessage="#{chofer.CampoApellido}" size="35"/>
                            </td>
                            <td align="left">
                                <p:message for="txtApellidos" />
                            </td>
                        </tr>
                        <tr>
                            <th align="right" scope="row">
                                <p:outputLabel for="txtDireccion" value="#{chofer.Direccion}"/>
                            </th>
                            <td align="left">
                                <p:inputText id="txtDireccion" value="#{choferController.selected.direccion}" title="#{chofer.Direccion}" size="35"/>
                            </td>
                        </tr>
                        <tr>
                            <th align="right" scope="row">
                                <p:outputLabel for="txtTelefono" value="#{chofer.Telefono}"/>
                            </th>
                            <td align="left">
                                <p:inputText id="txtTelefono" value="#{choferController.selected.telefono}" title="#{socio.Telefono}" size="35"/>
                            </td>
                        </tr>
                        <tr>
                            <th align="right" scope="row">
                                <p:outputLabel for="txtMatriculas" value="#{chofer.TipoLicencia}"/></th>
                            <td align="left">
                                <p:selectOneMenu style="width: 270px" panelStyle="width:500px" id="txtMatriculas" value="#{choferController.selected.tipoLicencia}" required="true" requiredMessage="#{chofer.CampoTipoLicencia}">                                    
                                    <f:selectItem id="item1" itemLabel="Seleccionar..." itemValue="" />
                                    <f:selectItem id="item2" itemLabel="Tipo E" itemValue="Tipo E" />
                                    <f:selectItem id="item3" itemLabel="Tipo E.1" itemValue="Tipo E1" />
                                    <f:selectItem id="item4" itemLabel="Tipo G" itemValue="Tipo G" />                                    
                                </p:selectOneMenu>
                            </td>
                            <td align="left"><p:message for="txtMatriculas" /></td>
                        </tr>
                        <tr>
                            <th align="right" scope="row">
                                <p:outputLabel for="vendorStartDateInputTxt" value="#{chofer.CaducaLicencia}" />
                            </th>
                            <td align="left">
                                <p:calendar locale="es"  value="#{choferController.selected.caducaLicencia}" 
                                            required="true" requiredMessage="#{chofer.CampoCaducaLicencia}" 
                                            size="30" id="vendorStartDateInputTxt" pattern="yyyy/dd/MM" mode="popup" showOn="button">
                                    <f:convertDateTime type="date" locale="es_EC" timeZone="America/Guayaquil"  
                                                       dateStyle="default" pattern="yyyy/dd/MM" />
                                </p:calendar>
                            </td>
                            <td align="left"><p:message for="vendorStartDateInputTxt" /></td>
                        </tr>
                        <tr>
                            <th align="right" scope="row">
                                <p:outputLabel for="txtCorreo" value="#{chofer.Correo}"/>
                            </th>
                            <td align="left">
                                <p:inputText id="txtCorreo" value="#{choferController.selected.email}" title="#{chofer.Correo}" size="35"/>
                            </td>
                        </tr>
                        <tr>
                            <th align="right" scope="row">
                                <p:outputLabel for="upload" value="#{chofer.Foto}"/>
                            </th>
                            <td align="left">
                                <p:fileUpload id="upload" value="#{choferController.selected.file}" mode="simple" />
                            </td>
                        </tr>
                        <tr>                                
                            <th align="center" colspan="2" scope="row">
                                <p:commandButton ajax="false" action="#{choferController.crearChofer()}" value="Guardar"/>
                            </th>
                        </tr>                                       
                    </table>  
                    <div style="font-size: small" align="right">
                        * Campos Obligatorios
                    </div>
                    <div align="left" style="font-size: small">                        
                        <h:link outcome="Index" value="#{chofer.RegresarIndex}" />
                    </div>      
                </p:panel>                             
            </h:form>
        </ui:define>
    </ui:composition>

    <script type="text/javascript">
        PrimeFaces.locales['es'] = {
            closeText: 'Cerrar',
            prevText: 'Anterior',
            nextText: 'Siguiente',
            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
            dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
            dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
            dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
            weekHeader: 'Semana',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: '',
            timeOnlyTitle: 'Sólo hora',
            timeText: 'Tiempo',
            hourText: 'Hora',
            minuteText: 'Minuto',
            secondText: 'Segundo',
            currentText: 'Fecha actual',
            ampm: false,
            month: 'Mes',
            week: 'Semana',
            day: 'Día',
            allDayText: 'Todo el día'
        };
    </script>
</html>

